<template>
  <div id="bg">
    <el-card class="box-card">
      <div id="from">
        <img class="tou" src="@/assets/biao.png" alt="" />
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item prop="loginName">
            <el-input style="margin-left: 0px" class="ipt" v-model="form.loginName" placeholder="请输入账号" prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
          <div class="code">
            <el-form-item prop="code">
              <el-input v-model="form.code" placeholder="请输入验证码" prefix-icon="el-icon-mobile-phone" class="el-row is-justify-space-between el-row--flex el-col-17"></el-input>
              <div class="yzm el-col-7"><img @click="changeImg" id="pic" class="code-image" :src="verification" alt="" /></div>
            </el-form-item>
          </div>

          <el-button type="primary" class="login" @click="loginFn">登录</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { login } from '@/api/user'
import { setToken } from '@/utils/storage'

export default {
  computed: {
    random: {
      get() {
        return this.form.clientToken || Math.floor(Math.random() * 100000)
      },
      set(val) {
        this.form.clientToken = val
      },
    },
    verification() {
      return `https://likede2-java.itheima.net/api/user-service/user/imageCode/${this.random}`
    },
  },
  created() {
    const clientToken = (len = 32) => {
      let text = ''
      let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i < len; i++) text += possible.charAt(Math.floor(Math.random() * possible.length))
      return text
    }
    this.form.clientToken = clientToken()
    // window.addEventListener('keydown',function(e){
    //   if(e.key==="Enter"){
    //     this.$router.push('/')
    //   }
    // })
  },
  data() {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0,
      },
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    changeImg() {
      this.random = Math.floor(Math.random() * 1000000)
    },
    async loginFn() {
      const res = await login(this.form)
      console.log(res)
      Message(res.data.msg)
      if (res.data.success) {
        this.$router.push('/homepage')
        setToken(res.data.token)
      }
    },
  },
}
</script>

<style scoped lang="less">
.el-form-item__content {
  display: flex;
}
#bg {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-image: url('/src/assets/bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  #from {
    position: absolute;
    width: 518px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    border-radius: 10px;
    .el-col-17 {
      width: 70%;
    }
    .tou {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
    }

    .el-col-7 {
      width: 31%;
      .code-image {
        display: block;
        height: 52px;
      }
    }
    #el-form-item {
      margin-left: 0 !important;
    }
    .login {
      width: 100%;
      height: 52px;
      background: linear-gradient(262deg, #2e50e1, #6878f0);
      opacity: 0.91;
      border-radius: 8px;
      color: #fff;
      text-shadow: 0 7px 22px #cfcfcf;
    }
  }
}
/deep/ .el-input__inner {
  height: 54px;
}
/deep/ .el-form-item__content {
  line-height: 48px;
  margin: 0 !important;
  position: relative;
  .yzm {
    width: 15vh;
    height: 10vh;
    position: absolute;
    right: -5vh;
    bottom: -3vh;
    .pic {
      width: 30vh !important;
      height: 15vh !important;
    }
  }
}
</style>
